<template>
    <show-modal :title="options.title" :loading="options.loading" width="440px" @cancel="cancel" @submit="submit">
        <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
            <a-form-item label="头像" name="avatar">
                <UploadImage :list="formState.avatar" @upload="uploadAvatar" @delete="delAvatar"></UploadImage>
            </a-form-item>
            <a-form-item label="用户名" name="username">
                <a-input v-model:value="formState.username" :disabled="formState.id ? true : false" placeholder="请填写用户名" />
            </a-form-item>
            <a-form-item label="昵称" name="nickname">
                <a-input v-model:value="formState.nickname" placeholder="请填写昵称" />
            </a-form-item>
            <a-form-item label="手机号" name="phone">
                <a-input v-model:value="formState.phone" placeholder="请填写手机号" />
            </a-form-item>
            <a-form-item label="角色" name="role_id">
                <a-select v-model:value="formState.role_id" style="width:100%" allowClear placeholder="请选择角色">
                    <a-select-option :value="item.id" v-for="item in roleBox" :key="item.id">{{ item.name
                    }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="所属部门" name="depart_id">
                <a-tree-select v-model:value="formState.depart_id" show-search style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择部门" allow-clear
                    tree-default-expand-all :fieldNames="fieldNames" :tree-data="deptList" tree-node-filter-prop="label">
                </a-tree-select>
            </a-form-item>
            <a-form-item label="是否管理员" name="is_admin">
                <a-switch v-model:checked="formState.is_admin" checked-children="开" un-checked-children="关" />
            </a-form-item>
            <a-form-item label="状态" name="status">
                <a-switch v-model:checked="formState.status" checked-children="开" un-checked-children="关" />
            </a-form-item>
        </a-form>
    </show-modal>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { rules } from './rules'
import { add, update } from '@/api/system/user';
import { message } from 'ant-design-vue';
import { useForm } from '@/hooks/use-form/index'
import { IUser } from '../user.type';
import UploadImage from '@/components/upload-image/index.vue'
import { deepClone } from '@/utils';

let props = defineProps({
    info: {
        type: Object,
        default: () => null
    },
    roleList: {
        type: Array,
        default: () => []
    },
    deptList: {
        type: Array,
        default: () => []
    }
})
let roleBox = ref<any[]>();
onMounted(() => {
    roleBox.value = props.roleList || [];
})
let fieldNames = {
    children: 'children',
    label: 'name',
    value: 'id'
}

let emit = defineEmits(['cancel', 'submit']);
// /**基本配置 */
const options = reactive({
    title: '用户信息',
    loading: false
})

/**表单 */
let form = reactive<IUser>({
    username: '',
    nickname: '',
    depart_id: undefined,
    role_id: undefined,
    avatar: [],
    phone: '',
    password: '123456',
    is_admin: false,
    status: true
});

props.info && Object.assign(form, props.info)
//上传头像
const uploadAvatar = (file: any) => {
    let { image } = file;
    formState.value.avatar = ['http://127.0.0.1:8086/' + image]
}
//删除头像
const delAvatar = (file: any) => {
    let { index } = file
    formState.value.avatar.splice(index,1)
}

const { formRef, layout, formState, showLoading, hideLoading, formValidateFields } = useForm(form)
// 提交
const submit = async () => {
    try {
        let res = await formValidateFields();
        let result = deepClone(res)
        result.avatar = result.avatar ? result.avatar.join(','):'';
        showLoading()
        if (result.id) {
            await update(result);
        } else {
            await add(result);
        }
        message.success('操作成功');
        emit('submit');
    } finally {
        hideLoading()
    }
}
//取消
const cancel = () => {
    emit('cancel')
}
</script>